<!-- 薪资统计页面 -->
<template>
  <div class="main-app"
       v-loading="loading"
       element-loading-text="页面数据加载中..."
       element-loading-svg-view-box="-10, -10, 50, 50"
       element-loading-background="rgba(122, 122, 122, 0.8)">
    <!--  头部  -->
    <div class="main-app-header">
      <span class="title">中山市嘉晖金属制品有限公司</span>
      <!--   logo   -->
      <img class="header-logo" src="@/assets/icons/logo.png">
      <!--  时间组件   -->
      <div class="header-data">
        <el-config-provider :locale="locale">
          <el-date-picker
              v-model="dateRef"
              type="month"
              placeholder="请选择"
              value-format="YYYY-MM"
              @change="handleInput"
              :clearable="false"
          />
        </el-config-provider>
      </div>
    </div>
    <!--  中间展示区域  -->
    <div class="main-app-ctn">
      <!-- 综合指标   -->
      <div class="ctn-box main-app-ctn-top">
        <div class="ctn-box-title">综合指标</div>
        <div class="ctn-box-base">
          <div class="box">
            <img src="@/assets/icons/salary/icon4.png"/>
            <div class="box-details">
              <div class="box-details-row">
                <span class="sp1"><em>总人数：</em><i>{{baseInfo?.thisMonthTotalUser}}</i></span>
                <span class="sp1"><em>较上月</em><i :class="[baseInfo?.peoRate > 0 ? 'i-up' : 'i-down']">{{baseInfo?.peoRate?.toFixed(2)}}%</i></span>
              </div>
            </div>
          </div>
          <div class="box">
            <img src="@/assets/icons/salary/icon5.png"/>
            <div class="box-details">
              <div class="box-details-row">
                <span class="sp1"><em>总工资额：</em><i>{{caleData(baseInfo?.thisMonthTotalSalary)}}元</i></span>
                <span class="sp1"><em>较上月</em><i :class="[baseInfo?.salRate > 0 ? 'i-up' : 'i-down']">{{baseInfo?.salRate?.toFixed(2)}}%</i></span>
              </div>
            </div>
          </div>
          <div class="box">
            <img src="@/assets/icons/salary/icon6.png"/>
            <div class="box-details">
              <div class="box-details-row">
                <span class="sp1"><em>人力占比：</em><i>{{baseInfo?.renRate?.toFixed(2) ?? '--'}}</i></span>
                <span class="sp1"><em>较上月</em><i :class="[baseInfo?.rate > 0 ? 'i-up' : 'i-down']">{{baseInfo?.rate?.toFixed(2) ?? '--'}}%</i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 详细指标   -->
      <div class="main-app-ctn-box">
        <div class="ctn-box group-info" v-for="(el,key) in echartsListInfo">
          <div class="ctn-box-title">{{key}}</div>
          <div class="ctn-box-base">
            <!--     基础信息    -->
            <div class="base-info">
              <div class="base-info-cul">
                <div class="base-info-item">
                  <img src="@/assets/icons/salary/icon-1.png"/>
                  <div class="introduction">
                    <span>总人数</span>
                    <label>{{el.length}}</label>
                  </div>
                </div>
                <div class="base-info-item">
                  <img src="@/assets/icons/salary/icon-4.png"/>
                  <div class="introduction">
                    <span>派工单外工资额</span>
                    <label>3,450</label>
                  </div>
                </div>
              </div>
              <div class="base-info-cul">
                <div class="base-info-item">
                  <img src="@/assets/icons/salary/icon-2.png"/>
                  <div class="introduction">
                    <span>平均工资</span>
                    <label>{{el?.avgSalary}}</label>
                  </div>
                </div>
                <div class="base-info-item">
                  <img src="@/assets/icons/salary/icon-5.png"/>
                  <div class="introduction">
                    <span>超过8500人员数量</span>
                    <label>{{el?.curCount}}</label>
                  </div>
                </div>
              </div>
              <div class="base-info-cul">
                <div class="base-info-item">
                  <img src="@/assets/icons/salary/icon-3.png"/>
                  <div class="introduction">
                    <span>最高工资</span>
                    <label>{{el?.maxSalary}}</label>
                  </div>
                </div>
                <div class="base-info-item">
                  <img src="@/assets/icons/salary/icon-6.png"/>
                  <div class="introduction">
                    <span>最低工资</span>
                    <label>{{el?.minSalary}}</label>
                  </div>
                </div>
              </div>
            </div>
            <!--     报表数据    -->
            <div class="base-echarts">
              <basic-echarts-bar
                  :chartData="el?.chatDataList"
                  :showDataZoom="true"
              ></basic-echarts-bar>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import locale from 'element-plus/es/locale/lang/zh-cn';
import {ref} from "vue";
import formatDate,{caleData} from "@/utils/baseCfg";
import BasicEchartsBar from "@/components/basicEchartsBar.vue";
import {
  getGroupUserAndSalaryApi,
  getPeopleRatioApi,
  getSalaryTotalApi,
  getUserTotalApi
} from "@/api/modules/base";
import {IBase} from "@/api/interface/base";

defineOptions({
  name: 'salaryView'
})
// 加载进度
const loading = ref<boolean>(true)
// 右上角时间下拉框
const dateRef = ref(formatDate(new Date()))
// 下拉日期选中时事件
const handleInput = () => {
  if (dateRef.value.trim() === '') return
  getData()
}
//报表数据
let echartsListInfo = ref({})
// 综合指标
let baseInfo: any = {} = ref<IBase.showDataSalary>()
// 后台获取数据
const getData = async () => {
  let params = reactive<IBase.Params>({
    month: parseInt(dateRef.value.split('-')[1]),
    year: dateRef.value.split('-')[0]
  })
  const {data: userTotal} = await getUserTotalApi(params)
  const {data: salaryTotal} = await getSalaryTotalApi(params)
  const {data: peopleRatio} = await getPeopleRatioApi(params)
  const {data: groupUserAndSalary} = await getGroupUserAndSalaryApi(params)
  baseInfo.value = {...userTotal,...salaryTotal,...peopleRatio}
  baseInfo.value.peoRate = (baseInfo.value.thisMonthTotalUser - baseInfo.value.lastMonthTotalUser) / baseInfo.value.lastMonthTotalUser * 100
  if(baseInfo.value.lastMonthTotalSalary === 0){
    baseInfo.value.salRate = 0
  } else{
    baseInfo.value.salRate = (baseInfo.value.thisMonthTotalSalary - baseInfo.value.lastMonthTotalSalary) / baseInfo.value.lastMonthTotalSalary * 100
  }
  if(baseInfo.value.thisMonthTotalBG !== 0){
    baseInfo.value.renRate = baseInfo.value.thisMonthTotalSalary / baseInfo.value.thisMonthTotalBG
    baseInfo.value.renRateLast = baseInfo.value.lastMonthTotalSalary / baseInfo.value.lastMonthTotalBG
    // 人力占比变化率
    baseInfo.value.rate = (baseInfo.value.renRate / baseInfo.value.renRateLast)/baseInfo.value.renRateLast * 100
  }
  // 薪资报表
  if(Object.keys(groupUserAndSalary).length > 0){
    for(const key in groupUserAndSalary){
      const data = groupUserAndSalary[key]
      // 总人数
      data.count = data.length
      const salarys = data.map(i=> Number(i.salary))
      // 平均工资
      data.avgSalary = (salarys.reduce((acc, current) => acc + current, 0) / data.length).toFixed(2);
      // 最高工资
      data.maxSalary = Math.max(...salarys)
      // 派工单外工资额
      // 超过8500人员数量
      data.curCount = 0
      data.forEach(i=>{
        if(Math.floor(i.salary) > 8500){
          ++data.curCount
        }
      })
      // 最低工资
      data.minSalary = Math.min(...salarys)
      // 报表
      data.chatDataList = {
        data: {
          0: {
            data: salarys,
            type: 'line',
            lineColor: 'rgba(255, 194, 30, 1)', // 折现颜色
            colors: ['rgba(255, 194, 30, .2)','rgba(255, 194, 30, .01)']
          },
        },
        label: data.map(i=>i.username),
        name: ["薪资"]
      }
    }
  }
  echartsListInfo.value = groupUserAndSalary
  loading.value = false
}
onMounted(async ()=>{
  getData()
})
</script>

<style lang="scss" scoped>
@use 'salary';
</style>
